<template>
  <div>
    <div class="search-container">
      <div class="search-inp-container">
        <el-input @keyup.enter.native="handleSearch" placeholder="输入商品名称" v-model="listQuery.goodName" style="width:170px" clearable>
        </el-input>
        <el-select @keyup.enter.native="handleSearch" v-model="listQuery.goodStatus" placeholder="选择商品状态" style="width:170px" clearable >
          <el-option v-for="item in goodStatusOptions" :key="item.value" :label="item.dictDesc" :value="item.value" :disabled="isDisabled[item.delFlag]">
            <span style="float: left">{{ item.dictDesc }}</span>
          </el-option>
        </el-select>
        <el-select @keyup.enter.native="handleSearch" v-model="listQuery.isShow" placeholder="选择首页推荐" style="width:170px" clearable >
          <el-option v-for="item in recomMaps" :key="item.key" :label="item.name" :value="item.key" :disabled="isDisabled[item.delFlag]">
            <span style="float: left">{{ item.name }}</span>
          </el-option>
        </el-select>
       <!-- <el-select @keyup.enter.native="handleSearch" v-model="listQuery.isShow" placeholder="选择商品栏目" style="width:170px" clearable >
          <el-option v-for="item in goodColumnOptions" :key="item.value" :label="item.dictDesc" :value="item.value" :disabled="isDisabled[item.delFlag]">
            <span style="float: left">{{ item.dictDesc }}</span>
          </el-option>
        </el-select>-->
      </div>
      <el-button class="search-btn" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
      <el-button class="search-btn" v-if="mall_goods_add" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
      <el-button class="search-btn" :autofocus="true" icon="el-icon-refresh" @click="refreshHandle">刷新</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row >
      <el-table-column align="center" prop="goodId" label="商品id">
      </el-table-column>
      <el-table-column align="center" prop="goodImg" label="商品图片" >
        <template   slot-scope="scope">
          <img :src="scope.row.goodImg"  min-width="70" height="70" />
        </template>
      </el-table-column>
      <!--<el-table-column align="center" prop="goodId" label="商品编码">-->
      <!--</el-table-column>-->
      <el-table-column align="center" prop="goodName" label="商品名称">
      </el-table-column>
      <!--<el-table-column align="center" prop="goodSourceid" label="渠道商">-->
      <!--<el-table-column align="center" prop="remark" label="渠道商">-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" prop="goodsValue" label="商品价格（积分）">
      </el-table-column>
      <el-table-column align="center" prop="stock" label="商品库存（件）">
      </el-table-column>-->
      <el-table-column align="center" prop="goodType" label="商品类型">
        <template slot-scope="scope">
          <el-span >
            {{scope.row.goodType | statusFilter}}
          </el-span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="goodStatus" label="商品状态">
        <template slot-scope="scope">
          <el-span >
            {{scope.row.goodStatus | goodStatusFilter}}
          </el-span>
        </template>
      </el-table-column>
      <el-table-column align="center"  label="首页推荐">
        <template slot-scope="scope">
          <el-span >
            {{scope.row.isShow | isShowFilter}}
          </el-span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createDate | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="400" v-if="mall_goods_get||mall_goods_update ||mall_goods_sxj||mall_goods_tj||mall_goods_del">
        <template slot-scope="scope">
          <el-button style="float: left" v-if="mall_goods_get" size="mini" type="primary" @click="handleLook(scope.row)">查看</el-button>
          <el-button style="float: left" v-if="mall_goods_update" size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button style="float: left" v-if="scope.row.goodStatus == 0 && mall_goods_sxj" size="mini" type="primary" @click="handleSj(scope.row)">上架</el-button>
          <el-button style="float: left" v-if="scope.row.goodStatus == 1 && mall_goods_sxj" size="mini" type="primary" @click="handleXj(scope.row)">下架</el-button>
          <el-button style="float: left" v-if="scope.row.isShow == 0 && mall_goods_tj" size="mini" type="primary" @click="handleTj(scope.row)">推荐</el-button>
          <el-button style="float: left" v-if="scope.row.isShow == 1 && mall_goods_tj" size="mini" type="primary" @click="handleTjCancel(scope.row)">取消推荐</el-button>
          <el-button style="float: left" v-if="mall_goods_del" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-size="listQuery.size" :page-sizes="[10, 40, 80, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="80%" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">

        <!--<el-form-item class="w347"  label="商品栏目" placeholder="" prop="isShow">-->
          <!--<el-select class="filter-item w347" v-model="form.isShow" placeholder="请选择">-->
            <!--<el-option v-for="item in goodColumnOptions" :key="item.value" :label="item.dictDesc" :value="item.value" :disabled="isDisabled[item.delFlag]">-->
              <!--<span style="float: left">{{ item.dictDesc }}</span>-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item class="w347"  label="商品类型" placeholder="请输入标题" prop="goodType">
          <el-select class="filter-item w347" v-model="form.goodType" placeholder="请选择" style="width: 50%">
            <el-option v-for="item in goodTypeOptions" :key="item.value" :label="item.dictDesc" :value="item.value" :disabled="isDisabled[item.delFlag]">
              <span style="float: left">{{ item.dictDesc }}</span>
            </el-option>
          </el-select>
        </el-form-item>
       <!-- <el-form-item label="渠道商" prop="goodSourceid">
          <el-select class="filter-item w347" v-model="form.goodSourceid" placeholder="请选择" style="width: 50%">
            <el-option v-for="item in channelOptions" :key="item.channelId" :label="item.channelName" :value="item.channelId" :disabled="isDisabled[item.delFlag]">
              <span style="float: left">{{ item.channelName }}</span>
            </el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="商品名称" prop="goodName">
          <el-input class="w347" v-model="form.goodName" placeholder="" maxLength='15' style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgUrl">
          <div>
            <el-upload
              class="avatar-uploader1"
              :action="imgUpload"
              :headers = "headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar1" >
              <i v-else class="el-icon-plus avatar-uploader-icon1" style="border: 1px dashed #d9d9d9;"></i>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="商品简介" prop="goodDesc">
          <el-upload
            class="avatar-uploader quill-img"
            :action="imgUpload"
            :headers="headers"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
            >
          </el-upload>
          <!--富文本编辑器组件-->
          <quill-editor
            v-model="form.goodDesc"
            ref="myQuillEditor"
            :options="editorOption"
            @change="onEditorChange($event)">
          </quill-editor>
        </el-form-item>

        <el-form-item label="短信模板" prop="messCode"><el-button type="primary" @click="gotoMessage()">填写说明</el-button>
          <el-input class="w347" v-model="form.messCode" placeholder="" rows="5" type="textarea" maxLength='300' ></el-input>
        </el-form-item>

        <el-form-item label="商品状态" prop="goodStatus">
          <el-select class="filter-item w347" v-model="form.goodStatus" placeholder="请选择" style="width: 50%">
            <el-option v-for="item in goodStatusOptions" :key="item.value" :label="item.dictDesc" :value="item.value" >
              <span style="float: left">{{ item.dictDesc }}</span>
            </el-option>
          </el-select>
        </el-form-item>

       <!-- <el-form-item label="推送行社" prop="orgNo">
          <el-select class="filter-item w347" v-model="form.orgNo" placeholder="请选择" style="width: 50%">
            <el-option v-for="item in orgOptions" :key="item.orgId" :label="item.orgName" :value="item.orgId" >
              <span style="float: left">{{ item.orgName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="VIP商品"  prop="isVip">
          <el-select class="filter-item w347" v-model="form.isVip" placeholder="请选择" style="width: 50%">
            <el-option v-for="item in isOptions" :key="item.value" :label="item.dictDesc" :value="item.value" >
              <span style="float: left">{{ item.dictDesc }}</span>
            </el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="商品规格"  prop="isShow">
          <el-form-item label=""  prop="isShow">
            <el-button type="primary" @click="addDomain($event)" >新增规格</el-button>
          </el-form-item>
        </el-form-item>

        <el-form-item v-for="(domain,index) in form.goodsSpecificationsList"   :key="domain.key"  >
           <el-form-item >
             <template>
               <el-col>
                 <label >规格名称</label>
               <el-input  v-model="domain.specificationName"  maxLength='10' placeholder="" @input="change($event)" style="width: 20%"></el-input>
                 <label >积分</label>
                 <el-input  v-model="domain.goodsValue" placeholder="" @input="change($event)" oninput="value=value.replace(/[^\d]/g,'')" maxLength='8' style="width: 10%"></el-input>
                 <label >库存</label>
                 <el-input  v-model="domain.stock" placeholder="" @input="change($event)" oninput="value=value.replace(/[^\d]/g,'')" maxLength='8' style="width: 10%"></el-input>
                 <label >价格</label>
                 <el-input  v-model="domain.piceShow" placeholder="" @input="change($event)" maxLength='8' style="width: 10%"></el-input>
                 <label >兑换码</label>
                 <el-input  v-model="domain.changeCode" placeholder="" @input="change($event)" maxLength='128' style="width: 18%"></el-input>
                 <el-button type="primary" @click.prevent="removeDomain(domain)">删除</el-button>
               </el-col>
             </template>
           </el-form-item>
        </el-form-item>
          <!--<el-form-item label="积　分"  prop="goodsValue" style="width: 25%">-->
            <!--<el-input   v-model="domain.goodsValue" placeholder="" @input="change($event)" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9' style="width: 20%"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="库　存"  prop="stock" style="width: 25%">-->
            <!--<el-input class="w347"  v-model="domain.stock" placeholder="" @input="change($event)" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9' style="width: 20%"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="价　格"  prop="pice" style="width: 25%">-->
            <!--<el-input class="w347"  v-model="domain.pice" placeholder="" @input="change($event)" oninput="value=value.replace(/[^\d]/g,'')" maxLength='9' style="width: 20%"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="兑换码"  prop="changeCode" style="width: 25%">-->
            <!--<el-input class="w347" v-model="domain.changeCode" placeholder="" @input="change($event)" maxLength='9' style="width: 20%"></el-input>-->
           <!--</el-form-item>-->
           <!-- <el-button type="primary" @click.prevent="removeDomain(domain)">删除</el-button>-->
            <!--</el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-else type="primary" @click="update('form')">修 改</el-button>
      </div>
    </el-dialog>
      <!-- 查看-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="lookVisible" width="80%" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">

        <el-form-item class="w347"  label="商品类型" placeholder="请输入标题" prop="goodType">
          <el-select class="filter-item w347" v-model="form.goodType" placeholder="请选择" style="width: 50%" disabled="disabled">
            <el-option v-for="item in goodTypeOptions" :key="item.value" :label="item.dictDesc" :value="item.value" :disabled="isDisabled[item.delFlag]">
              <span style="float: left">{{ item.dictDesc }}</span>
            </el-option>
          </el-select>
        </el-form-item>
       <!-- <el-form-item label="渠道商" prop="goodSourceid">
          <el-select class="filter-item w347" v-model="form.goodSourceid" placeholder="请选择" style="width: 50%" disabled="disabled">
            <el-option v-for="item in channelOptions" :key="item.channelId" :label="item.channelName" :value="item.channelId" :disabled="isDisabled[item.delFlag]">
              <span style="float: left">{{ item.channelName }}</span>
            </el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="商品名称" prop="goodName">
          <el-input class="w347" v-model="form.goodName" placeholder="" maxLength='15' style="width: 50%" readonly="readonly"  disabled="disabled"> </el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgUrl">
          <div> <img :src="form.goodImg" style="width: 200px;height: 200px">
          </div>
        </el-form-item>

        <el-form-item label="商品简介1" prop="goodDesc">
          <el-upload
            class="avatar-uploader quill-img"
            :action="imgUpload"
            :headers="headers"
            :show-file-list="false"
            >
          </el-upload>
          <!--富文本编辑器组件-->
          <quill-editor
            v-model="form.goodDesc"
            ref="myQuillEditor"
            :options="editorOption"
            @change="onEditorChange($event)"
            disabled="disabled"></quill-editor>
        </el-form-item>

        <el-form-item label="短信模板" prop="messCode"><el-button type="primary" @click="gotoMessage()">填写说明</el-button>
          <el-input class="w347" v-model="form.messCode" placeholder="" rows="5" type="textarea" maxLength='300' disabled="disabled"></el-input>
        </el-form-item>

        <el-form-item label="商品状态" prop="goodStatus">
          <el-select class="filter-item w347" v-model="form.goodStatus" placeholder="请选择" style="width: 50%" disabled="disabled">
            <el-option v-for="item in goodStatusOptions" :key="item.value" :label="item.dictDesc" :value="item.value" >
              <span style="float: left">{{ item.dictDesc }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品规格"  prop="isShow">
          <el-form-item label=""  prop="isShow">
          </el-form-item>
        </el-form-item>

        <el-form-item v-for="(domain,index) in form.goodsSpecificationsList"   :key="domain.key"  >
          <el-form-item >
            <template>
              <el-col>
                <label >规格名称</label>
                <el-input  v-model="domain.specificationName"  maxLength='10' placeholder="" @input="change($event)" style="width: 20%" disabled="disabled"></el-input>
                <label >积分</label>
                <el-input  v-model="domain.goodsValue" placeholder="" @input="change($event)" oninput="value=value.replace(/[^\d]/g,'')" maxLength='8' style="width: 10%" disabled="disabled"></el-input>
                <label >库存</label>
                <el-input  v-model="domain.stock" placeholder="" @input="change($event)" oninput="value=value.replace(/[^\d]/g,'')" maxLength='8' style="width: 10%" disabled="disabled"></el-input>
                <label >价格</label>
                <el-input  v-model="domain.piceShow" placeholder="" @input="change($event)" maxLength='8' style="width: 10%" disabled="disabled"></el-input>
                <label >兑换码</label>
                <el-input  v-model="domain.changeCode" placeholder="" @input="change($event)" maxLength='128' style="width: 18%" disabled="disabled"></el-input>
              </el-col>
            </template>
          </el-form-item>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelGet('form')">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { fetchList, delObj, getObj, addObj, putObj, SXJObj, isShowObj, getToken } from '@/api/mallgoods'
import { getTopDictListByDescNew } from '@/api/dict'
import { quillEditor } from 'vue-quill-editor'
import  quillConfig from 'vue-quill-editor/src/options.js'
import { getChannelList } from '@/api/channel'
import { mapGetters } from 'vuex'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'


export default {
  data() {
    return {
      editorOption: quillConfig,
      // 图片
      imageUrl: '',
      dialogImageUrl: undefined,
      dialogVisible: false,
      url: '',
      imgUpload: process.env.BASE_API + '/mall/ad/imgUpload/',
      //imgUpload: 'https://ndjf.zrinfo.com.cn/mall/ad/imgUpload/',
      headers: {
        'Authorization': getToken()
        // token为系统访问需要的,放在header中
      },
      fileList: [],
      isMultiple: false,
      imgLimit: 1,
      // 图片
      tableKey: 0,
      listLoading: false,
      lookVisible: false,
      list: [],
      listQuery: {
        current: 1,
        size: 10,
        isValid: 1,
        goodName: '',
        goodStatus: '',
        // goodColumn: '',
        isShow: ''
        // descs: 'create_date'
      },

      total: 0,
      mall_goods_add: false,
      mall_goods_update: false,
      mall_goods_get: false,
      mall_goods_del: false,
      mall_goods_sxj: false,
      mall_goods_tj: false,
      dialogFormVisible: false,
      isRouteAtive: true,
      recomMaps: [
        {
          key: '0',
          name: '不推荐'
        },
        {
          key: '1',
          name: '推荐'
        }
      ],
      form: {
        goodsSpecificationsList: [{
          specificationName: undefined,
          goodsValue: undefined,
          stock: undefined,
          changeCode: undefined,
          piceShow: undefined
        }],
        goodColumn: undefined,
        goodType: undefined,
        goodSourceid: undefined,
        goodName: undefined,
        goodStatus: undefined,
        specificationName: undefined,
        goodImg: undefined,
        orgNo: undefined,
        isShow: undefined
      },
      rules: {
        goodType: [
          {
            required: true,
            message: '请选择商品类型',
            trigger: 'change'
          }
        ],
        // goodSourceid: [
        //   {
        //     required: true,
        //     message: '请选择渠道商',
        //     trigger: 'blur'
        //   }
        // ],
        goodName: [
          {
            required: true,
            message: '请填写商品名',
            trigger: 'blur'
          }
        ],
        goodStatus: [
          {
            required: true,
            message: '请选择商品状态',
            trigger: 'change'
          }
        ]
      },
      textMap: {
        update: '编辑',
        create: '创建',
        look: '查看'
      },
      dialogStatus: '',
      role: [],
      rolesOptions: [],
      isOptions: [],
      channelOptions: [],
      orgOptions: [],
      goodStatusOptions: [],
      goodTypeOptions: [],
      isVip: ['是', '否'],
      goodColumnOptions: ['1', '9'],
      isDisabled: {
        0: false,
        1: true
      },
      statusOptions: ['0', '1'],
      dialogDeptVisible: false,
      treeDeptData: [],
      checkedKeys: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      }
    }
  },

  components: {
    quillEditor,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '直冲类',
        2: '非直冲类'
      }
      return statusMap[status]
    },
    isVip(status) {
      const statusMap = {
        0: '否',
        1: '是'
      }
      return statusMap[status]
    },
    goodStatusFilter(status) {
      const statusMap = {
        1: '上架',
        0: '未上架'
      }
      return statusMap[status]
    },
    goodColumnFilter(status) {
      const statusMap = {
        1: '精品推荐',
        9: '其他'
      }
      return statusMap[status]
    },
    isShowFilter(status) {
      const statusMap = {
        0: '不推荐',
        1: '推荐'
      }
      return statusMap[status]
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    },
    ...mapGetters(['permissions'])
  },

  mounted() {
    this.getList()
    this.mall_goods_add = this.permissions['/mall/goods:add']
    this.mall_goods_get = this.permissions['/mall/goods:get']
    this.mall_goods_update = this.permissions['/mall/goods:update']
    this.mall_goods_del = this.permissions['/mall/goods:del']
    this.mall_goods_sxj = this.permissions['/mall/goods:sxj']
    this.mall_goods_tj = this.permissions['/mall/goods:tj']
  },

  methods: {
    getList() {
      this.getDictList()
      this.getGoodColumn()
      this.listLoading = true
      this.listQuery.isAsc = false
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    change(e) {
      this.$forceUpdate()
    },
    refreshHandle() {
      this.listQuery.current = 1
      this.listQuery.size = 10
      this.listQuery.username = ''
      this.getList()
    },
    handleLook(row) {
      this.lookVisible = true
      this.dialogStatus = 'look'
      this.lookGood = row
      this.imageUrl = ""
      this.getDictList()
      this.getChannel()
      //this.getOrgList()
      this.getGoodType()
      getObj(row.goodId).then(response => {
        this.form = response.data.goods
        // this.form.goodsSpecificationsList = response.data.goodsSpecificationsList
        var result = response.data.goodsSpecificationsList
        for (var i = 0; i < result.length; i++) {
          result[i].goodsValue = result[i].goodsValue / 100
          result[i].piceShow = result[i].pice / 100
        }
        this.form.goodsSpecificationsList = result
        // 图片回显
        const url = response.data.goods.goodImg
        if (url != null) {
          this.imageUrl = url
        }
      })
    },
    handleAdd() {
      this.dialogStatus = 'create'
      this.getDictList()
      this.getChannel()
      //this.getOrgList()
      this.getGoodType()
      this.dialogFormVisible = true
      this.form = {
        goodsSpecificationsList: [{
          specificationName: undefined,
          goodsValue: undefined,
          stock: undefined,
          changeCode: undefined,
          piceShow: undefined
        }],
        goodColumn: undefined,
        goodType: undefined,
        goodSourceid:"zr001",
        goodName: undefined,
        goodStatus: undefined,
        specificationName: undefined,
        goodImg: undefined,
        orgNo: undefined,
        isShow: undefined
      }
      this.fileList = []
      this.imageUrl = ""
    },
    handleDelete(row) {
      this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delObj(row.goodId)
          .then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    },
    // 上架
    handleSj(row) {
      this.$confirm(
        '此操作将上架该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        SXJObj(row.goodId)
          .then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '上架成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '上架失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    },
    // 下架
    handleXj(row) {
      this.$confirm(
        '此操作将下架该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        SXJObj(row.goodId)
          .then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '下架成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '下架失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    },
    // 推荐
    handleTj(row) {
      this.$confirm(
        '此操作将推荐该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        isShowObj(row.goodId)
          .then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '推荐成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '推荐失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    },
    // 取消推荐
    handleTjCancel(row) {
      this.$confirm(
        '此操作将取消推荐该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        isShowObj(row.goodId)
          .then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '取消推荐成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '取消推荐失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    },
    handleEdit(row) {
      this.dialogStatus = 'update'
      this.imageUrl = ""
      this.getDictList()
      this.getChannel()
      //this.getOrgList()
      this.getGoodType()
      getObj(row.goodId).then(response => {
        this.form = response.data.goods
        // this.form.goodsSpecificationsList = response.data.goodsSpecificationsList
        var result = response.data.goodsSpecificationsList
        for (var i = 0; i < result.length; i++) {
          result[i].goodsValue = result[i].goodsValue / 100
          result[i].piceShow = result[i].pice / 100
        }
        this.form.goodsSpecificationsList = result
        // 图片回显
        const url = response.data.goods.goodImg
        if (url != null) {
          this.imageUrl = url
        }
        this.dialogFormVisible = true
        this.dialogStatus = 'update'
      })
    },
    handleSearch() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    create(formName) {
      if (this.imageUrl === "") {
        this.$notify({
          title: '失败',
          message: '请上传图片',
          type: 'error',
          duration: 2000
        })
        return
      }
      if(this.form.goodsSpecificationsList.length ===0){
        this.$notify({
          title: '失败',
          message: '商品规格不能为空',
          type: 'error',
          duration: 2000
        })
        return
      }
      for (let i = 0; i < this.form.goodsSpecificationsList.length; i++) {
        if (this.form.goodsSpecificationsList[i].goodsValue === '' || this.form.goodsSpecificationsList[i].goodsValue === undefined) {
          this.$notify({
            title: '失败',
            message: '规格积分不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].specificationName == '' || this.form.goodsSpecificationsList[i].specificationName == undefined) {
          this.$notify({
            title: '失败',
            message: '规格名不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].changeCode == '' || this.form.goodsSpecificationsList[i].changeCode == undefined) {
          this.$notify({
            title: '失败',
            message: '兑换码不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].piceShow == '' || this.form.goodsSpecificationsList[i].piceShow == undefined) {
          this.$notify({
            title: '失败',
            message: '价格不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].stock == '' || this.form.goodsSpecificationsList[i].stock == undefined) {
          this.$notify({
            title: '失败',
            message: '库存不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
      }
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          for (let i = 0; i < this.form.goodsSpecificationsList.length; i++) {
            this.form.goodsSpecificationsList[i].pice = this.form.goodsSpecificationsList[i].piceShow * 100
          }
          addObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          /*debugger
          for (let i = 0; i < this.form.goodsSpecificationsList.length; i++) {
            this.form.goodsSpecificationsList[i].pice = this.form.goodsSpecificationsList[i].pice / 100
          }*/
          return false
        }
      })
    },
    cancel(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    cancelGet(formName) {
      this.lookVisible = false
      this.$refs[formName].resetFields()
    },
    update(formName) {
      if (this.imageUrl === "") {
        this.$notify({
          title: '失败',
          message: '请上传图片',
          type: 'error',
          duration: 2000
        })
        return
      }
      if(this.form.goodsSpecificationsList.length ==0){
        this.$notify({
          title: '失败',
          message: '商品规格不能为空',
          type: 'error',
          duration: 2000
        })
        return
      }
      for (let i = 0; i < this.form.goodsSpecificationsList.length; i++) {
        if (this.form.goodsSpecificationsList[i].goodsValue == '' || this.form.goodsSpecificationsList[i].goodsValue == undefined) {
          this.$notify({
            title: '失败',
            message: '规格积分不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].specificationName == '' || this.form.goodsSpecificationsList[i].specificationName == undefined) {
          this.$notify({
            title: '失败',
            message: '规格名不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].changeCode == '' || this.form.goodsSpecificationsList[i].changeCode == undefined) {
          this.$notify({
            title: '失败',
            message: '兑换码不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].piceShow == '' || this.form.goodsSpecificationsList[i].piceShow == undefined) {
          this.$notify({
            title: '失败',
            message: '价格不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
        if (this.form.goodsSpecificationsList[i].stock == '' || this.form.goodsSpecificationsList[i].stock == undefined) {
          this.$notify({
            title: '失败',
            message: '库存不能为空',
            type: 'error',
            duration: 2000
          })
          return
        }
      }
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
          this.form.password = undefined
          for (let i = 0; i < this.form.goodsSpecificationsList.length; i++) {
            this.form.goodsSpecificationsList[i].pice = this.form.goodsSpecificationsList[i].piceShow *100
          }
          putObj(this.form).then(() => {
            this.dialogFormVisible = false
            this.getList()
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    async getDictList() {
      const res = await getTopDictListByDescNew('商品状态')
      this.goodStatusOptions = res.data
    },
    async getChannel() {
      const res = await getChannelList()
      this.channelOptions = res.data
    },
    async getOrgList() {
      const res = await fetchOrgList()
      this.orgOptions = res.data
    },
    async getGoodType() {
      const res = await getTopDictListByDescNew('商品类型')
      this.goodTypeOptions = res.data
    },
    async getGoodColumn() {
      // const res = await getTopDictListByDescNew('商品栏目')
      // this.goodColumnOptions = res.data
      const res1 = await getTopDictListByDescNew('是否')
      this.isOptions = res1.data
    },
    gotoMessage() {
      this.$alert('样例：【宁德农商银行】您兑换的\n' +
        ' 中石化油卡卡号：#{kahao}，卡密：#{kami}，面值：#{optionsName}，有效期至：#{expireDate}\n' +
        ' 关键字说明：\n' +
        ' 卡号:#{kahao}\n' +
        ' 卡密：#{kami}\n' +
        ' 短链：#{duanlian}\n' +
        ' 商品名称：#{goodsName}\n' +
        ' 价值：#{goodsPrice}\n' +
        ' 生效时间：#{effectDate}\n' +
        ' 失效时间：#{expireDate}', '短信模板', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    },
    onEditorChange({editor, html, text}) {//内容改变事件
      console.log("---内容改变事件---")
      this.content = html
      console.log(html)
    },
    addDomain(e) {
      this.form.goodsSpecificationsList.push({
        specificationName: undefined,
        goodsValue: undefined,
        stock: undefined,
        changeCode: undefined,
        key: Date.now()
      })
      this.$forceUpdate()
    },
    removeDomain(item) {
      var index = this.form.goodsSpecificationsList.indexOf(item)
      if (index !== -1) {
        this.form.goodsSpecificationsList.splice(index, 1)
      }
      this.$forceUpdate()
    },
    handleAvatarSuccess(res, file) {
      var url = res.true
      if (url === '' || url === undefined ) {
        this.$notify({
          title: '失败',
          message:res.false,
          type: 'error',
          duration: 4000
        })
        return
      }
      this.form.goodImg = url// 表单提交
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    beforeUpload() {
      // 显示loading动画
      this.quillUpdateImg = true
    },
    uploadSuccess(res, file) {
      let quill = this.$refs.myQuillEditor.quill
      // 如果上传成功
      if (res.true !=null) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, 'image', res.true)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        this.$message.error('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    uploadError() {
      // loading动画消失
      this.quillUpdateImg = false
      this.$message.error('图片插入失败')
    }
  }
}

</script>


<style lang='scss' scoped>
.w347 {
  width: 100%;
}
.avatar-uploader1 .el-upload1 {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader1 .el-upload:hover1 {
  border-color: #409EFF;
}
.avatar-uploader-icon1 {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar1 {
  width: 200px;
  height: 178px;
  display: block;
}
</style>
